<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.child{
			background: #333333;
			color: #ffffff;
		}
	</style>
</head>
<body>
	<div id="app">
		
	</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	/**
	 * 1.了解Vue(构造函数，实例，原型)
	 * 2.options参数一项一项来处理
	 * 3.读并且使用vue的api
	 *
	 */
	var sayHello = Vue.component('sayHello',{		
		template: `<p>{{say}}</P>`,
		props: ['say'],
		created: function(){
			// console.log(Object.entries(this.$options._base));
		}
	});
	var a = new Vue({
		// el: '#app',
		props: {},
		template: `
			<div>
				<p>{{a}}</p>
				<button @click="add">点击</button>
				<input type="" name="" v-model="a">
				<sayHello :say="a" class="child"></sayHello>
			</div>			
		`,
		data: {
			a: 'hello',
			b: 1,
			c: 2,
			d: 3,
			e: 4,
			f: {
				g: 5,
				h: 6
			}
		},
		methods: {
			add: function(){
				this.a = 'world';
			}
		},
		directives: {},
		filters: {},
		components: {sayHello: sayHello},
		watch: {
			a:function(){

			},
			
		}
	});

	a.$mount('#app');
	// a.$destroy();
	// a.add();


	// console.log(a,'我是实例');
	// console.log(Vue.prototype,'我是原型对象');
	// console.log(Vue,'我是vue');
	for(var p in Vue){
		// console.log(p,'我是Vue的静态属性/方法');
	}
	// console.log(Object.keys(a));
	console.log(Object.entries(a),'我是Vue根实例');
	console.log(Object.entries(Vue),'我是静态');
	console.log(Object.entries(Vue.prototype),'我是Vue原型');
	console.log(sayHello);
	console.log(Object.entries(sayHello),'我是组件');

	// Object.freeze(a);
	var sum = 10000;
	for(var i = 0; i < 5; i ++){
		sum = sum * (1 + 0.003);
	}
	console.log(sum);
</script>
</body>
</html>